<template>
	<view class="fee">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="租车位" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style=" background-color: #F2F3F5;">
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
					<view class="user-list">
						<view class="title" style="padding-top: 10rpx;">
							<u-cell-group :border="false">
								<u-cell icon="https://resourse.cnlhjt.com/upload/20220825/651206a7d0688d69f6448bb5c016854c.png" :title="house" :border="false"
									isLink @click="showFloor = true"></u-cell>
							</u-cell-group>

						</view>
					</view>
				</view>

				<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
					<view class="user-list">
						<view class="title">
							<view style="float: left; color: #363636; font-size: 28rpx;">
								<text>{{square}}</text>
							</view>
							<view
								style="float: right; margin-right: 20rpx; color: #636363; font-size: 26rpx; font-weight: 400;">
								<text>共计{{num}}个车位</text>
							</view>

						</view>
						<view
							style="clear: both; margin: 20rpx; background-color: #EEEEEE; border-radius: 20rpx; padding: 20rpx;">
							<view class="title">
								<view style="float: left;color: #363636; font-size: 28rpx;">
									<text>车位分布</text>
								</view>
								<view
									style="float: right; margin-right: 10rpx; color: #636363; font-size: 26rpx; font-weight: 400;">
									<text
										style=" padding: 8rpx 20rpx; border-radius: 40rpx; background-color: #FFFFFF;">车位分布图</text>
								</view>
							</view>
							<view style="clear: both;">
								<u-grid col="6">

									<u-grid-item v-for="(item, index) in parkList" @click="selectItem(index)">
										<view v-if="index == current"
											style="width: 90rpx; height: 90rpx; border-radius: 15rpx; background-color: #0B868E; color: #FFFFFF; margin: 10rpx; text-align: center; line-height: 80rpx;">

											<text>{{item.name}}</text>
										</view>
										<view v-else
											style="width: 90rpx; height: 90rpx; border-radius: 15rpx; background-color: #FFFFFF; margin: 10rpx; text-align: center; line-height: 80rpx;">
											<text>{{item.name}}</text>
										</view>
									</u-grid-item>

								</u-grid>

								<u-alert :title="'停车位 ' + parkList[current].name" type="info" effect="dark"
									:description="'出租期限:' + parkList[current].time + '个月 　　　　　 出租费用:' + parkList[current].fee + '元/月'">
								</u-alert>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view style="width: 80%;margin-left: 10%;margin-top: 100rpx;">
			<view style="margin-bottom: 20rpx;">

				<u-alert v-if="showAlert == true" type="error" description="请先勾选同意服务协议"></u-alert>
				<u-checkbox-group @change="checkboxChange">
					<u-checkbox v-model="agree" shape="circle"></u-checkbox>
					<text>我已阅读并同意 <text style="color: #0B868E;">用户租车位协议</text></text>
				</u-checkbox-group>
			</view>
			<u-button :customStyle="btnStyle" @click="intoDetail">确 定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
				},
				house: '龍舟·壹号院10号楼-3单元 402室',
				square: '龍舟·壹号院',
				current: 0,
				num: 13,
				parkList: [{
						name: 'A01',
						id: 1,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A02',
						id: 2,
						time: 6,
						fee: 180.00
					},
					{
						name: 'A03',
						id: 3,
						time: 12,
						fee: 190.00
					},
					{
						name: 'A04',
						id: 4,
						time: 36,
						fee: 200.00
					},
					{
						name: 'A05',
						id: 5,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A07',
						id: 7,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A08',
						id: 8,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A09',
						id: 9,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A10',
						id: 10,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A11',
						id: 11,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A12',
						id: 12,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A21',
						id: 21,
						time: 3,
						fee: 180.00
					},
					{
						name: 'A31',
						id: 31,
						time: 3,
						fee: 180.00
					}
				]
			}
		},
		methods: {
			selectItem(index) {
				console.log(index);
				this.current = index;
			}
		}
	}
</script>

<style>
</style>
